<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./css/main.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="./css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <title>form - input</title>
</head>

<body>

  <div class="snippet">
    <input class="input" type="text" placeholder="Text input">
  </div>

  <div class="snippet">
    <div class="field">
      <div class="control">
        <input class="input is-primary" type="text" placeholder="Primary input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-info" type="text" placeholder="Info input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-success" type="text" placeholder="Success input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-warning" type="text" placeholder="Warning input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-danger" type="text" placeholder="Danger input">
      </div>
    </div>
  </div>

  <div class="snippet">
    <div class="field">
      <div class="control">
        <input class="input is-small" type="text" placeholder="Small input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Normal input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-medium" type="text" placeholder="Medium input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-large" type="text" placeholder="Large input">
      </div>
    </div>
  </div>

  <div class="snippet">
    <div class="field">
      <div class="control is-loading">
        <input class="input" type="text" placeholder="Normal input">
      </div>
    </div>
  </div>

  <div class="snippet">
    <div class="field">
      <div class="control is-small is-loading">
        <input type="text" class="input is-small" placeholder="Small input">
      </div>
    </div>
    <div class="field">
      <div class="control is-large is-loading">
        <input type="text" class="input is-large" placeholder="Large input">
      </div>
    </div>
  </div>

  <div class="snippet">
    <div class="field">
      <div class="control">
        <input type="text" class="input" placeholder="Disabled input" disabled>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input type="text" class="input" readonly placeholder="Readonly input">
      </div>
    </div>
  </div>

  <div class="snippet">

    <div class="field is-horizontal">
      <div class="field-label is-normal">
        <label for="" class="label">From</label>
      </div>
      <div class="field-body">
        <div class="field">
          <div class="control">
            <input type="email" class="input is-static" value="me@example.com" readonly>
          </div>
        </div>
      </div>
    </div>
    <div class="field is-horizontal">
      <div class="field-label is-normal">
        <label class="label">To</label>
      </div>
      <div class="field-body">
        <div class="field">
          <p class="control">
            <input class="input" type="email" placeholder="Recipient email">
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="snippet">
    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input" type="email" placeholder="Email">
        <span class="icon is-left">
          <i class="fa fa-envelope"></i>
        </span>
        <span class="icon is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <div class="control has-icons-left has-icons-right">
        <input type="email" class="input is-small" placeholder="Email">
        <span class="icon is-left">
          <i class="fa fa-envelope"></i>
        </span>
        <span class="icon is-right">
          <i class="fa fa-check"></i>
        </span>
      </div>
    </div>
    <div class="field">
      <div class="control has-icons-left has-icons-right">
        <input type="email" class="input is-large" placeholder="Email">
        <span class="icon is-left">
          <i class="fa fa-envelope"></i>
        </span>
        <span class="icon is-right">
          <i class="fa fa-check"></i>
        </span>
      </div>
    </div>
  </div>


</body>

</html>
